<template>
	<view>
		<search></search>
		<card></card>
		<articles :homeDatas="homeData"></articles>
		<!-- 发表 -->
		<view class="fabiao-wrap" @click="publish">
			<image src="../../static/fabiao2.png" mode=""></image>
		</view>

		<!-- 进入页面加载 -->
		<view v-if="showLoading">
			<home-load></home-load>
		</view>

		<!-- 上拉加载动画 -->
		<view v-if="uploadShow">
			<uploading></uploading>
		</view>
		
		<view class="noneData" v-if="noneData">
			<text>没有更多数据了...</text>
		</view>
	</view>
</template>

<script>
	import search from './components/search.vue'
	import card from './components/card.vue'
	import articles from './components/article.vue'

	//请求数据库的封装
	import database from '../../components/getData.js'
	
	import {mapState} from 'vuex'
	
	export default {
		data() {
			return {
				homeData: [], //首页数据
				showLoading: true,
				uploadShow: false,
				noneData: false,
				pageId: 0
			}
		},
		components: {
			search,
			card,
			articles
		},
		methods: {
			//跳转发表页面
			publish() {
				wx.navigateTo({
					url: '../publish/publish'
				})
			},

			//请求渲染数据
			databaseUpload() {
				let databaseUp = 'textarea'
				database(databaseUp).then(res => {
					console.log(res)
					this.homeData = res.data
					this.showLoading = false
				}).catch(err => {
					console.log(err)
				})
			},
			//下拉刷新请求数据库
			onPullDownRefresh() {
				this.databaseUpload()
				this.pageId = 0 //下拉刷新让pageId为0为了让上拉刷新从开始请求数据
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000)
			},
			
			//上拉加载
			onReachBottom() {
				this.pageId++
				console.log(this.pageId)
				this.uploadShow = true;
				//上拉加载请求渲染数据
				const db = wx.cloud.database()
				db.collection('textarea')
					.limit(4)
					.skip(this.pageId * 4)
					.orderBy('time','desc')
					.get()
					.then(res => {
						if(res.data.length==0){
							this.uploadShow = false;
							this.noneData = true
						}
						// console.log(res)
						//请求下来合并到一起
						this.homeData = [...this.homeData, ...res.data]
					}).catch(err => {
						console.log(err)
					})

			},
		},
		created() {
			//请求渲染数据
			this.databaseUpload()

		},
		
		computed:{
			...mapState(['PageShuaxin']),
			
			cont(){
				if(this.PageShuaxin.PageShuaxining==true){
					//请求渲染数据刷新
					this.databaseUpload()
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #efefef;
	}

	.fabiao-wrap {
		width: 100upx;
		height: 100upx;
		border-radius: 50%;
		background-color: #ffff00;
		position: fixed;
		bottom: 100upx;
		right: 90upx;
		box-sizing: border-box;

		image {
			width: 100upx;
			height: 100upx;
			border: 2px solid #000409;
			border-radius: 50%;
			position: fixed;
			bottom: 100upx;
			right: 90upx;
			box-sizing: border-box;
			padding: 15upx;
		}
	}
	.noneData{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10upx;
		text{
			color: #007AFF;
		}
	}
</style>
